<template>
  <div class="tableBox">
    <Table
      ref="Table"
      class="table"
      :loading="loading"
      :current-page="pageParams.page"
      :total="total"
      :page-size="pageParams.limit"
      :table-data="tableData"
      :columns="columns"
      :row-key="row => row.id"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
      @handleRadioChange="handleRadioChange"
      @rowDbClick="handleRowDbClick"
    >
      <template #importance="{row}">
        <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" />
      </template>
      <template #status="{row}">
        <el-tag :type="row.status ==='draft'?'info':'success'">{{ row.status }}</el-tag>
      </template>
      <template #comment_disabled="{row}">
        <el-switch v-model="row.comment_disabled" disabled active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
    </Table>
  </div>
</template>

<script>
import Table from '@/components/Table/index.vue'
import { fetchList } from '@/api/article'
import { mapActions, mapState } from 'vuex'


export default {
  components: {
    Table
  },
  data() {
    return {
      // 获取列表前是否loading加载
      loading: false,
      // 表格项绑定的属性
      columns: [
        {
          type: 'selection',
          align: 'center',
          selectable: row => row.id !== 1
        },
        /*  {
            type: 'radio',
            label: '单选',
            align: 'center',
            disabled: row => {
              return row.id === 1 || row.id === 2
            }
          },*/
        {
          type: 'index',
          label: '序号',
        },
        {
          prop: 'id',
          label: 'ID',
          width: '55px'
        },
        {
          prop: 'title',
          label: '描述',
          width: '300px',
          showTooltip: true
        },
        {
          prop: 'importance',
          label: '评价',
          slot: true
        },
        {
          prop: 'author',
          // width: '100px',
          label: '作者',
        },
        {
          prop: 'display_time',
          label: '审核时间',
          align: 'center'
          // formatter: row => (row.title ? row.title : '-')
        },
        {
          prop: 'reviewer',
          label: '审核人',
        },
        {
          prop: 'status',
          label: '状态',
          slot: true
        },
        {
          prop: 'comment_disabled',
          label: '开关',
          slot: true
        },
        {
          // width: '100px',
          prop: 'type',
          label: '类型',
          formatter: row => {
            const typeColorOptions = { US: 'gray', EU: '#0edd0e', JP: 'blue', CN: 'red' }
            return `<span style="color: ${typeColorOptions[row.type]}">${row.type}</span>`
          }
        },
        {
          align: 'center',
          label: '操作',
          actions: [
            {
              isShow: row => row.id !== 1, // 是否展示
              isDisable: row => row.id === 2, // 是否禁用
              // type: 'text',
              class: 'el-icon-edit',
              callback: row => {
                this.handleAddOrEdit('edit', row)
              }
            },
            {
              isShow: row => true, // 是否展示
              isDisable: row => false, // 是否禁用
              type: 'success', // 按钮类型
              svgClass: 'star', // svg图标class
              // class: 'el-icon-delete',
              callback: row => {
                this.handleDelete(row)
              }
            }
          ]
        }
      ],
      // 操作列

      total: 0
    }
  },
  computed: {
    ...mapState('table', ['pageParams', 'tableData'])
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    ...mapActions('table', ['setStateData']),
    // 获取列表数据
    getTableData() {
      fetchList(this.pageParams).then(res => {
        this.setStateData({
          tableData: res.data.items
        })
        this.total = res.data.total
      })
    },
    // 多选框事件
    handleSelectionChange(val) {
      console.log(val)
    },
    // 每也条数改变
    handleSizeChange(pageSize) {
      this.setStateData({
        pageParams: Object.assign({}, this.pageParams, { limit: pageSize })
      })
      this.getTableData()
    },
    // 改变页数
    handleCurrentChange(pageNum) {
      this.setStateData({
        pageParams: Object.assign({}, this.pageParams, { page: pageNum })
      })
      this.getTableData()
    },
    handleAddOrEdit(type, row) {
      if (type === 'edit') {
        console.log('edit', row)
      }
    },
    handleDelete(row) {
      console.log('delete', row)
    },
    handleRowDbClick(row) {
      console.log('rowDbClick', row)
    },
    handleRadioChange(row) {
      console.log('handleRadioChange', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.tableBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // radio checkbox根据你使用组件，自行更换
  ::v-deep.el-radio__original {
    display: none !important;
  }

  ::v-deep.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
  }
}
</style>
